<script setup>
import {inject, onMounted, ref, shallowRef} from "vue";
import memberListData from '@/dicts/member/memberList.json'
import { getMemberByKey } from '@/api/member'
import {useRoute} from "vue-router"
const route = useRoute()

const detail = ref({
	unitName: null,
	createTime: null,
	invoicingEnterpriseType: null,
	invoicingBlurb: null,
	corporationName: null,
	corporationPosition: null,
	mainBusiness: null,
	productIntro: null,
	brand: null,
	qualityCertification: null,
	registerAddr: null,
	registerArea: null,
	registerCity: null,
	registerProvince: null,
})

const getDetails = async () => {
		const id = route.query.id
		const res = await getMemberByKey({id})
		if(res.data.code === 200) {
			detail.value = {
				unitName: res.data.data.unitName,
				createTime: res.data.data.createTime,
				invoicingEnterpriseType: res.data.data.invoicingEnterpriseType,
				invoicingBlurb: res.data.data.invoicingBlurb,
				corporationName: res.data.data.corporationName,
				corporationPosition: res.data.data.corporationPosition,
				mainBusiness: res.data.data.mainBusiness,
				productIntro: res.data.data.productIntro,
				brand: res.data.data.brand,
				qualityCertification: res.data.data.qualityCertification,
				registerAddr: res.data.data.registerAddr,
				registerArea: res.data.data.registerArea,
				registerCity: res.data.data.registerCity,
				registerProvince: res.data.data.registerProvince,
			}
		}
	}
	onMounted(()=>{
		getDetails()
	})

</script>

<template>
	<div class="pageContent">
		<n-space
			align="center"
			justify="space-between"
			style="margin-bottom: 20px"
		>
			<n-h6 class="pageTitle" prefix="bar">
				<div>会员详情</div>
			</n-h6>
		</n-space>
		
		<n-divider class="pageDivider"></n-divider>
		
		<n-descriptions
			label-placement="left"
			label-align="right"
			bordered
			:column="3"
			:label-style="{
				width: '160px',
				fontWeight: 'bold',
			}"
		>
			<template #header style="margin-bottom: 0">
				<div
					style="
						font-size: 16px;
						font-weight: bold;
						text-align: center;
						/* border: 1px solid rgba(239, 239, 245, 1); */
						height: 46px;
						line-height: 46px
          "
				>
					会员信息
				</div>
			</template>
			
			<n-descriptions-item label="会员单位" :span="2" content-style="min-width: 200px">
				{{detail.unitName}}
			</n-descriptions-item>
			<n-descriptions-item label="发布时间" :span="1">
				{{detail.createTime}}
			</n-descriptions-item>
			
			<n-descriptions-item label="会员类型" :span="2">
				会员
			</n-descriptions-item>
			<n-descriptions-item label="企业类型" :span="0">
				<span v-if="detail.invoicingEnterpriseType === 1">上市公司</span>
				<span v-else-if="detail.invoicingEnterpriseType === 2">非上市公司</span>
				<span v-else>-</span>
			</n-descriptions-item>
			
			<n-descriptions-item label="公司介绍" :span="3">
				{{detail.invoicingBlurb}}
			</n-descriptions-item>
			
			<n-descriptions-item label="法人" :span="2">
				{{detail.corporationName}}
			</n-descriptions-item>
			<n-descriptions-item label="产品类型" :span="1">
				{{ detail.mainBusiness }}
			</n-descriptions-item>
			
			<n-descriptions-item label="职务" :span="2">
				{{detail.corporationPosition}}
			</n-descriptions-item>
			<n-descriptions-item label="产品生产" :span="1">
				{{detail.brand}}
			</n-descriptions-item>
			
			<n-descriptions-item label="主要产品名称及性能" :span="3">
				{{detail.productIntro}}
			</n-descriptions-item>
			
			<n-descriptions-item label="质量保证体系认证" :span="3">
				{{detail.qualityCertification}}
			</n-descriptions-item>
			
			<n-descriptions-item label="注册地址" :span="3">
				{{detail.registerProvince}}
				{{detail.registerCity}}
				{{detail.registerArea}}
				{{detail.registerAddr}}
			</n-descriptions-item>
		</n-descriptions>
	</div>
</template>

<style scoped>
</style>
